import { useRef, useState } from "react";
import DrawComponent from "../../../../../common/DrawComponent";
import LittleTitle from "../../../../../common/LittleTitle";
import useBusinessMap from "../../../../../common/BusinessMap/useBusinessMap";
import { Button, Space } from "antd";
import { PlayCircleFilled, PlayCircleOutlined } from "@ant-design/icons";
import { geomToWkt, navByWkt } from "../../../../../../utils/helper/mapHelper";
import RadiusComponent from "../../../../../common/RadiusComponent";
import CszhApi from "../../../../../../utils/apis/CszhApi";

export default function Cszhfx(props){
    const ref = useRef();
    const map = useBusinessMap();
    const [loading, setLoading] = useState();
    const [radius, setRadius] = useState();
    const [geom, setGeom] = useState()

    return <Space direction='vertical' style={{
        width: '100%'
    }}>
        <Space className='w100' direction='vertical'>
            <LittleTitle fontSize={16} icon={false}>选择周边距离</LittleTitle>
            <RadiusComponent radius={radius} onChange={value => {
                setRadius(value)
            }} />
        </Space>
        {radius && <Space className='w100' direction='vertical'>
            <LittleTitle fontSize={16} icon={false}>绘制图形</LittleTitle>
            <DrawComponent radius={radius * 1000} onDrawEnd={geom => {
                setGeom(geom)
            }} />
        </Space>}

        {geom && < div style={{
            marginTop: 16,
            textAlign: "right"
        }}>
            <Button icon={<PlayCircleOutlined />} loading={loading} type="primary" onClick={e => {
                const wkt = geomToWkt(geom);
                navByWkt(wkt, map, true);
                setLoading(true)
                CszhApi.listByPolygon2(wkt).then((resp) => {
                    props.onComplete?.(resp.data,geom)
                }).finally(e => setLoading(false))
            }}>开始分析</Button>
        </div>
        }
    </Space >;
}